WacthOS介面元素設計 佈局(指南)

Apple Watch Series 7 具有兩個新尺寸:41毫米和45毫米, 螢幕邊緣曲面設計,邊框更薄,角半徑更大。為了充分利用更大的顯示區域,設計團隊提出了三大設計原則:

A 放大了使用者介面元件,充分利用額外的空間以增強可用性。

B 透過排版和顏色,在手錶應用中建立更清晰的層次結構。

C 改進導航和路徑指引,以便在快速檢視時提供更好的位置感。

UI Element 使用者介面元素

A 狀態列變得更高,底部的滾動清除邊距也變得更高。

B 大標題引入,以使應用程式更易於快速瀏覽,提供更好的位置感,並在應用程式內建立更清晰的層次結構。標題在滾動時會過渡到狀態列。

C 顏色旨在幫助路徑指引、資訊層次,並傳達應用程式的個性。

在這個 Mindfulness 示例中,青色加強了應用的標識和體驗。並將系統灰色托盤背景色調低,以創造更柔和的效果。

列表檢視應用程式在手錶上很常見。在這個 Mail 示例中,使用藍色背景強化了你是在 Mail 應用中,而不是另一個使用類似導航模式的應用。藍色背景為標題的30%透明度。

亮黃色在視覺上將 Tips 與其他如 Workout 這樣的輪播導航應用區分開來。它還加強了 Tips 體驗在我們所有平臺上的連續性。

D 滾動檢視中的按鈕採用圓角矩形,不滾動檢視中的按鈕固定在螢幕底部。Series 7 中的按鈕形狀經過精心設計,與手錶的硬體相協調。

最佳化點1: 簡化為統一的次級按鈕配色方案,並將並排按鈕從分裂膠囊切換到並膠囊形狀。

左側為可滾動螢幕的按鈕造型,右側為固定螢幕的按鈕。

最佳化前:

最佳化後:

按鈕高度不變,所以現有 UI 不需要更新佈局就能使用這些新按鈕。

最佳化點2:精心設計的按鈕形,讓固定在螢幕底部的按鈕的曲率與手錶硬體和諧統一。

最佳化前:

最佳化後